<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="box">
    <div class="echarts">
      <dv-border-box12>
        <h4>月度用水曲线</h4>
        <Waters></Waters>
      </dv-border-box12>
    </div>
    <div class="echarts">
      <dv-border-box12>
        <h4>月度用电图</h4>
        <Electric></Electric>
      </dv-border-box12>
    </div>
    <div class="echarts">
      <dv-border-box12>
        <h4>月度死亡率</h4>
        <Death></Death>
      </dv-border-box12>
    </div>
  </div>
</template>
  
<script lang="ts" setup>
import Waters from '../Month/Echarts/Water.vue'
import Electric from '../Month/Echarts/Electric.vue'
import Death from '../Month/Echarts/Death.vue'


</script>
  
<style scoped>
.box {
  width: 100%;
  height: 100%;
  margin-right: 1vw;
}

.echarts {
  width: 100%;
  height: 28vh;
}

.echarts h4 {
  width: 100%;
  text-align: center;
  padding-top: 1vh;
  color: #2cf6f4;
}

</style>